<template>
	<u-popup  width="80%" :mask-click="false" mode="center" ref="popups"  border-radius="24" z-index="1075">
		<view @click="close" class="relation">
			<view class="notice" style="border-bottom: solid 1px #C8C7CC; margin: 0 40rpx;">
				<view class="content">
					<view class="header">公告:</view>
					加机友微信号:
					<view class="num">12313asd</view>
					拉您进机械微信群
				</view>
				<view @click.stop="goWeChat('12313asd')" class="wechat" >复制并前往微信</view>
			</view>
			<view class="notice" style="margin: 0 40rpx;">
				<view class="content" style="justify-content: center;">
					客服电话:
					<view class="phone">
						12345678911
					</view>
				</view>
				<view class="parent" @click="tel">
					<a class="btn" href="tel:phoneNumber"> 拨打电话 </a>
				</view>
			</view>
		</view>
	</u-popup>
	
</template>

<script>
	export default {
		props:{
			show:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				isShow:this.show
			}
		},
		
		methods: {
			close(){
				this.$refs.popups.close()
			},
			goWeChat(num){
				console.info(num);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.relation{
		.popup{
			width: 80vw;
		}
		.notice{
			padding: 40rpx 0;
			.content{
				display: flex;
				padding: 20rpx 40rpx 80rpx 40rpx;
				font-size: 32rpx;
				flex-wrap: wrap;
				.header{
					color: #ff0000;
				}
				.num{
					color: #007AFF;
				}
				.phone{
					color:  #007AFF;
				}
			}
			.wechat{
				text-align: center;
				background: #007AFF;
				color: #FFFFFF;
				font-size: 32rpx;
				padding: 20rpx 0;
				border-radius: 10rpx;
			}
			.btn{
				text-align: center;
				background: #007AFF;
				color: #FFFFFF;
				border-radius: 6rpx;
				margin: 0 10rpx;
				text-decoration: none;
				font-size: 32rpx;
				padding: 20rpx 0;
				border-radius: 10rpx;
			}
		}
	}
</style>
